<template>
  <!--用于可以左右拖动位置的组件和左右拖动大小的组件-->
  <div
    ref="lineRef"
    class="line-item-com"
    draggable="true"
    :class="{ 'hidden-margin': hiddenMargin }"
    @dragend.prevent="mouseup"
    @dragstart="handleDragStart"
  >
    <div
      v-for="(item, index) in dragItemList"
      ref="lineItemRef"
      :key="index"
      class="com-line line-item"
      :class="{
        'show-border': item.click,
        'border-inside': showSelect,
        select: index === timelineItem.currentSelect && showSelect,
      }"
      :style="getLineItemStyle(item)"
      @mousedown.stop="mousedown($event, index)"
      @dblclick.stop="dbClick"
      @mouseenter="mouseenter(index)"
      @mouseleave="mouseleave()"
    >
      <div
        v-show="!disDragTime && index === timelineItem.currentSelect && !item.time"
        class="com-left drag-btn"
        draggable="true"
        @dragstart.stop.prevent=""
      >
        <span class="ths-icon-drag-left"></span>
      </div>
      <div class="com-middle" @contextmenu.prevent="rightClick($event, index)">
        <slot v-if="timelineItem.multi" :name="index"></slot>
        <div v-else class="block-container">
          <div
            v-for="(item, index) in timelineItem.blockArr"
            :key="index"
            class="block-item"
            :style="{ width: item.width + 'px' }"
          >
            <slot :name="index"></slot>
          </div>
        </div>
      </div>
      <div
        v-show="!disDragTime && index === timelineItem.currentSelect && !item.time"
        class="com-right drag-btn"
        draggable="true"
        @dragstart.stop.prevent=""
      >
        <span class="ths-icon-drag-right"></span>
      </div>
    </div>
    <!--右键菜单组件-->
    <context-menu
      v-model="contextMenu.visible"
      :position="contextMenu.position"
      :menu-list="contextMenu.list"
      :index="contextMenu.index"
      @click="clickMenu"
    ></context-menu>
    <!--单个轴移动过程中的表示原来位置的盒子-->
    <div
      v-show="beforeLineStyle.visible && !isFatherEl"
      :style="originBoxStyle"
      class="line-item-origin-box"
    ></div>
  </div>
</template>

<script>
import ContextMenu from './contextMenu.vue';
import lineItemMixins from '@veditor/components/timeLine/js/lineItemMixins';
import eventBus from '@veditor/eventBus';
import { ICON_STATUS } from '@veditor/components/timeLine/js/enums';
import { calcAllWidth } from '@veditor/components/timeLine/js/common';
import { debounce } from 'lodash';
export default {
  name: 'LineItem',
  components: { ContextMenu },
  mixins: [lineItemMixins],
  data() {
    return {
      dbTimer: 0, //点击事件定时器
      contextMenu: {
        visible: false,
        list: [],
        position: { top: 0, left: 0 },
        index: 0,
      },
      previewTimer: 0,
    };
  },
  computed: {
    // 禁用行内拖动位置
    disDragPos() {
      return this.timelineItem.disable.row;
    },
    // 禁止行内调整时间
    disDragTime() {
      return this.timelineItem.disable.time;
    },
    // 判断是否需要开启禁用元素拖动
    disDrag() {
      return this.timelineItem.disable.col;
    },
    //判断是否不是多轴元素
    showSelect() {
      return !this.timelineItem.childrenElList.length;
    },
    // 用于多元素的收缩时不显示marginBottom
    hiddenMargin() {
      return !this.showSelect && this.timelineItem.iconDisable.contract === 2;
    },
    // 显示原来盒子位置的样式
    originBoxStyle() {
      return {
        left: `${this.beforeLineStyle.left}px`,
        width: `${this.beforeLineStyle.width}px`,
      };
    },
    // 控制轴可以超出文本驱动时长
    disExceedFlag() {
      return this.timelineItem.disable.exceed;
    },
    // 是否是父元素
    isFatherEl() {
      return Boolean(this.timelineItem.childrenList.length);
    },
  },
  mounted() {
    this.init();
    this.init = debounce(this.init, Number('60'));
    this.initContextmenu(); // 初始化右键菜单
    this.timelineItem.resize = this.init.bind(this); // 初始化的时候添加一个自适应的函数
    eventBus.$on('timeline:scroll', () => this.cancelMenu());
  },
  methods: {
    // 用于页面初始化的时候和大小更新时重新计算宽度
    init() {
      const { width: vW } = document.querySelector('.com-scroll-item').getBoundingClientRect();
      Object.assign(this, { viewWidth: vW, allWidth: calcAllWidth(vW) });
      this.initList();
      this.initOptions(); // 处理一些子轴的动态配置,一些子轴的显示可以左右父轴的配置
    },
    // 用于初始化列表
    initList() {
      const { timelineItem, allWidth, dragItemList } = this;
      const { multi } = timelineItem;
      dragItemList.splice(0, dragItemList.length);
      if (!multi) {
        const { startTime, duration } = timelineItem;
        const { width, left } = timelineItem.calcPosition(allWidth, startTime, duration);
        const lineStyle = { width, left };
        const dragItem = { current: '', lineStyle, click: false, row: false, time: false };
        this.dragItemList.push(dragItem);
        if (this.isFatherEl) {
          this.$emit('updateStyle', lineStyle);
        }
      } else {
        const { sliderArr, fatherStartTime = 0 } = timelineItem;
        sliderArr.forEach(item => {
          const { startTime, duration, uid, disable } = item;
          const { row, time } = disable || { row: false, time: false }; // 不存在的给出默认值
          const { width, left } = timelineItem.calcPosition(
            allWidth,
            startTime - fatherStartTime,
            duration,
          );
          this.dragItemList.push({
            uid,
            current: '',
            lineStyle: {
              width,
              left,
            },
            click: false,
            row,
            time,
          });
        });
      }
    },
    // 这里可以动态的对不同轴根据判断设置不同的属性
    initOptions() {
      const { timelineItem } = this;
      const { name } = timelineItem;
    },
    // 处理点击事件
    click(index) {
      const { timelineItem } = this;
      const { selectable } = timelineItem.iconDisable;
      clearTimeout(this.dbTimer);
      if (selectable !== ICON_STATUS.OFF) {
        timelineItem.clickItem(timelineItem);
        timelineItem.select(timelineItem, index);
      }
    },
    dbClick() {
      const { timelineItem } = this;
      clearTimeout(this.dbTimer);
      timelineItem.dbClick(timelineItem);
    },
    // 右击事件
    rightClick(e, index) {
      // 播放中禁止右键
      if (this.timelineItem.playing) {
        return;
      }
      const { contextMenu } = this;
      // 计算点击位置的坐标
      const { clientX, clientY } = e;
      contextMenu.position.left = clientX;
      contextMenu.position.top = clientY;
      contextMenu.visible = true;
      contextMenu.index = index;
    },
    // 点击菜单
    clickMenu(index, value) {
      const { timelineItem } = this;
      timelineItem.clickMenu(timelineItem, index, value);
    },
    cancelMenu() {
      this.contextMenu.visible = false;
    },
    // 初始化右键菜单
    initContextmenu() {
      const { timelineItem, contextMenu } = this;
      contextMenu.list = timelineItem.parseContextMenu();
    },
    mouseenter(index) {
      const { timelineItem } = this;
      const { sliderArr, disable } = timelineItem;
      if (!disable.previewVideo) {
        this.previewTimer = setTimeout(() => {
          if (!this.moving) {
            const demoUrl = sliderArr[index].videoUrl;
            const el = this.$refs.lineItemRef[index];
            timelineItem.openPreview(timelineItem, el, demoUrl);
          }
        }, Number('1000'));
      }
    },
    mouseleave() {
      const { disable } = this.timelineItem;
      if (!disable.previewVideo) {
        clearTimeout(this.previewTimer);
        this.timelineItem.closePreview();
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.line-item-com
  position relative
  display flex
  justify-content space-between
  align-items center
  height 30px
  margin-bottom 6px
  line-height 30px
  &:last-child
    margin-bottom unset
  &.hidden-margin
    margin-bottom unset
  .com-line
    top 0
    position absolute
    display flex
    min-width 12px
    height 100%
    border-radius 4px
    overflow hidden
    border 2px solid transparent
    &.select
      border 2px solid #979797
      z-index 9
      .drag-btn
        z-index 10
    .com-left
      left 0
      cursor w-resize
    .com-middle
      flex 1
      cursor pointer
      .block-container
        display flex
        height 100%
        .block-item
          border-right 1px solid #282828
    .com-right
      right 0
      cursor e-resize
    .drag-btn
      position absolute
      top 0
      height 100%
      display flex
      justify-content center
      align-items center
      z-index 1
.line-item-origin-box
  position absolute
  top 0
  min-width 12px
  height 100%
  border-radius 4px
  overflow hidden
  border 2px solid transparent
  z-index 1
  background rgba(255, 255, 255, 0.1)
.ths-icon-drag-left
  display block
  width 12px
  height 30px
  background-image url('../assets/dragLeft.svg')
  background-size 100%
  background-repeat no-repeat
  background-position center
.ths-icon-drag-right
  display block
  width 12px
  height 30px
  background-image url('../assets/dragRight.svg')
  background-size 100%
  background-repeat no-repeat
  background-position center
</style>
